<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-02-18 
 -->


<template>
  <div>
    <el-button style="margin: 80px" type="success" size="mini" @click="dialogVisible = true">click me</el-button>

    <el-dialog title="提示" :visible.sync="dialogVisible" top="8vh" width="45%" @close="handleClose">

      <el-form :inline="form.inline" :model="form">
        <el-form-item label="审批人" label-width="120px">
          <el-select v-model="form.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动区域" label-width="120px">
          <el-select v-model="form.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="form.inline = !form.inline">查询</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-button style="margin: 80px" type="success" size="mini" @click="TreedialogVisible = true">click me</el-button>

    <span class="text-20 ml-5">名称</span>
    <span class="text-25 ml-10">名称</span>
    <span class="text-30 ml-15">名称</span>
    <span class="text-35 ml-20">名称</span>
    <span class="text-40 ml-25">名称</span>
    <span class="text-60 ml-30">名称</span>

    <el-row>
      <el-col :span="16" :offset="3" style="height: 250px; background: #c6c6c6">
        <el-table v-loading="load.loading" v-el-table-infinite-scroll="loadMore" :height="load.tableHeight" :data="load.data" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="nickname" label="用户昵称"></el-table-column>
          <el-table-column prop="comment_id" label="id"></el-table-column>
          <el-table-column prop="text" label="留言"></el-table-column>
          <el-table-column prop="date" label="创建时间"></el-table-column>
        </el-table>
      </el-col>

    <!-- <el-row>
      <el-col>
          <el-form label-width="200px">
          <el-form-item label="时间：">
            <el-date-picker v-model="dateTime.valueStart" :picker-options="dateTime.dateTimeStartFunc" type="datetime" placeholder="开始时间"/>
            <span>-</span>
            <el-date-picker v-model="dateTime.valueEnd" :picker-options="dateTime.dateTimeEndFunc" default-time="23:59:59" type="datetime" placeholder="结束时间"/>
          </el-form-item>
        </el-form>
      </el-col> -->
    </el-row>

  </div>
</template>
<script>
import { commentList } from "@/api";
import elTableInfiniteScroll from "el-table-infinite-scroll";
export default {
  name: "Home",
  directives: { "el-table-infinite-scroll": elTableInfiniteScroll },
  data() {
    let time = this.setDate(new Date());
    let defaultTimeStart = time.split(" ")[0] + " 00:00:00";
    let defaultTimeEnd = time.split(" ")[0] + " 23:59:59";
    return {
      dialogVisible: false,
      form: {
        user: "",
        region: "",
        inline: true,
      },
      load: {
        tableHeight: "330px",
        loading: false,
        data: [],
        page: 0,
        size: 10,
        total: 999,
        hasMore: false,
      },
      dateTime: {
        valueStart: defaultTimeStart,
        valueEnd: defaultTimeEnd,
        dateTimeStartFunc: {
          disabledDate: (time) => {
            let endDateVal = this.dateTime.valueEnd;
            if (endDateVal) {
              let date = this.setDate(new Date(endDateVal), 2);
              return (
                time.getTime() > + new Date(date + " 00:00:00") || time.getTime() < + new Date(this.getPreMonth(date) + " 00:00:00")
              );
            } else {
              return false;
            }
          },
        },
        dateTimeEndFunc: {
          // eslint-disable-next-line no-shadow
          disabledDate: (time) => {
            let startDateVal = this.dateTime.valueStart;
            if (startDateVal) {
              let date = this.setDate(new Date(startDateVal), 2);
              return (
                time.getTime() < +new Date(date + " 00:00:00") ||
                time.getTime() >
                  +new Date(this.getNextMonth(date) + " 00:00:00")
              );
            } else {
              return false;
            }
          },
        },
      },
    };
  },
  methods: {
    showFormat(prop) {
      const type = prop.alarmType;
      if (type == 1) {
        return prop.timeOut;
      }
      if (type == 2) {
        return prop.contentRegex;
      }
      if (type == 3) {
        return prop.httpCode;
      }
    },
    async getData() {
      const { page, size } = this.load;
      const { data, has_more, status } = await commentList({
        limit: page * size + 1,
        size,
      }); // 忽略的条数，当前需要返回的条数
      if (status) {
        this.load.loading = false;
        return this.$message.error("请求失败请重试");
      }
      this.load.data = [...data, ...this.load.data];
      this.load.loading = false; // loading效果
      // this.load.hasMore = has_more; // 是否加载完成
    },
    loadMore() {
      if (!this.load.loading) {
        this.load.loading = true;
        if (this.load.data.length < this.load.total) {
          this.load.page += 1;
          this.getData();
        } else {
          this.$message.success("已加载完所有的数据！");
          this.load.loading = true;
        }
      }
    },
    handleClose() {
      Object.assign(this.$data.form, this.$options.data().form);
    },
    setDate(date) {
      let currYear = date.getFullYear(); // 获取完整的年份(4位,1970-????)
      let currMonth = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1); // 获取当前月份(0-11,0代表1月)
      let currDay = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate(); // 获取当前日(1-31)
      return currYear + "-" + currMonth + "-" + currDay;
    },
    // 获取上一个月
    getPreMonth(date) {
      let arr = date.split("-");
      let year = arr[0] - 0;
      let month = arr[1] - 0;
      let day = arr[2] - 0;
      let days = new Date(year, month, 0); // 获取当前日期中当月最后一天日期
      days = days.getDate(); // 获取当前日期中的月的天数
      let year2 = year;
      let month2 = month - 1;
      if (month2 === 0) {
        // 跨年
        year2 = year2 - 1;
        month2 = 12;
      } else if (day === days) {
        // 结束时间为月末，开始时间选到月初，即同月
        month2 = month;
      }
      let day2 = day;
      let days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (month2 === month) {
        // 结束时间为月末，开始时间选到月初即当月1日
        day2 = 1;
      } else if (day2 > days2) {
        // 无对应日，则为当月最后一天，eg.结束时间为2019-03-30，则开始时间选到2019-03-28
        day2 = days2;
      } else {
        day2 = day + 1;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      if (day2 < 10) {
        day2 = "0" + day2;
      }
      let result = year2 + "-" + month2 + "-" + day2;
      return result;
    },
    // 获取下一个月
    getNextMonth(date) {
      let arr = date.split("-");
      let year = arr[0] - 0;
      let month = arr[1] - 0;
      let day = arr[2] - 0;
      let days = new Date(year, month, 0); // date月份的最后一天日期
      days = days.getDate();
      let year2 = year;
      let month2 = month + 1;
      if (day === 1) {
        // 开始时间为月初，结束时间选到月末，即同月
        month2 = month;
      } else if (month2 === 13) {
        // 跨年
        year2 = year2 + 1;
        month2 = 1;
      }
      let day2 = day - 1;
      let days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (month2 === month) {
        // 开始时间为月初，结束时间选到月末最后一天
        day2 = days;
      } else if (day2 > days2) {
        // 无对应日，则为当月最后一天，eg.开始时间为2020-01-31，则开始时间选到2020-02-29
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      if (day2 < 10) {
        day2 = "0" + day2;
      }
      let result = year2 + "-" + month2 + "-" + day2;
      return result;
    },
  },
  computed: {
    alert0() {
      return `第${this.load.page}页`;
    },
    alert1() {
      return `第${this.load.size}条`;
    },
    alert2() {
      return `共${this.load.total}条`;
    },
  },
  //  End
};
</script>

<style lang='scss' scoped>
@for $i from 12 through 100 {
  .text-#{$i} {
    font-size: #{$i}px;
  }
}
@for $i from 1 through 100 {
  .m-#{$i} {
    margin: #{$i}px;
  }
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}
</style>
